<template>
  <el-tabs v-model="activeName" class="demo-tabs">
    <el-tab-pane label="医生管理" name="first">
      <el-button text @click="dialogTableVisible = true" class="increase"> 添加医生 </el-button>
      <el-dialog v-model="dialogTableVisible" title="添加医生">
        <el-form :model="form">
          <el-form-item label="姓名" :label-width="formLabelWidth">
            <el-input v-model="form.empName" autocomplete="off" />
          </el-form-item>
          <el-form-item label="科室" :label-width="formLabelWidth">
            <el-select v-model="form.officeId" placeholder="请选择科室">
              <template
                v-for="item in store.state.doctor.keshiData"
                :key="item.id"
              >
                <el-option :label="item.officeName" :value="item.id" />
              </template>
            </el-select>
          </el-form-item>
          <el-form-item label="级别" :label-width="formLabelWidth">
            <el-select v-model="form.empGrade" placeholder="请选择级别">
              <el-option label="主治医师" value="1" />
              <el-option label="副主任医师" value="2" />
              <el-option label="主任医师" value="3" />
              <el-option label="医士" value="4" />
              <el-option label="医师" value="5" />
              <el-option label="助理医师" value="6" />
              <el-option label="实习医师" value="7" />
              <el-option label="主管护师" value="8" />
              <el-option label="护师" value="9" />
              <el-option label="护士" value="10" />
              <el-option label="医师助理" value="11" />
              <el-option label="研究生" value="12" />
              <el-option label="随访员" value="13" />
              <el-option label="其他" value="14" />
            </el-select>
          </el-form-item>
          <el-form-item label="手机号" :label-width="formLabelWidth">
            <el-input v-model="form.empPhoneNum" autocomplete="off" />
          </el-form-item>
          <el-form-item label="年龄" :label-width="formLabelWidth">
            <el-input v-model="form.empAge" autocomplete="off" />
          </el-form-item>
          <el-form-item label="职务" :label-width="formLabelWidth">
            <el-radio-group v-model="form.menuId">
              <el-radio :label="3" value="2">医生</el-radio>
              <el-radio :label="6" value="3">护士</el-radio>
              <el-radio :label="9" value="4">挂号员</el-radio>
              <el-radio :label="12" value="5">收费员</el-radio>
              <el-radio :label="15" value="6">发药员</el-radio>
              <el-radio :label="18" value="7">财务</el-radio>
              <el-radio :label="21" value="8">其他人员</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button type="primary" @click="ok">保存</el-button>
          </span>
        </template>
      </el-dialog>
      <el-button text @click="findEmp" class="disabled"> 已禁用人数 </el-button>
      <el-dialog v-model="dialogFormVisible" title="已禁用人数">
        <el-table :data="banData" style="width: 100%">
          <el-table-column label="姓名" prop="empName" width="60" />
          <el-table-column label="性别" prop="empSex" width="60" />
          <el-table-column label="年龄" prop="empAge" width="60" />
          <el-table-column label="电话" prop="empPhoneNum" width="130" />
          <!-- <template v-for="item in store.state.doctor.keshiData" :key="item.id" :label="item.officeName"> -->
          <el-table-column label="科室" prop="office.officeName" width="60" />
          <!-- </template> -->
          <el-table-column label="职务" prop="role.roleName" width="100" />
          <el-table-column label="加入时间" prop="jionTime" width="150" />
          <el-table-column label="操作" prop="do" width="auto" align="right">
            <template #default="scope">
              <el-button size="mini" @click="openThis(scope.$index, scope.row)"
                >启用</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-dialog>
      <el-input
      class="input"
        v-model="search"
        size="small"
        placeholder="请输入姓名"
        style="width: 200px"
        @blur="searchDoctor"
      />
      <el-table :data="getDoctor" style="width: 100%">
        <el-table-column label="序号" prop="id" width="100" />
        <el-table-column label="姓名" prop="empName" width="100" />
        <el-table-column label="性别" prop="empSex" width="100" />
        <el-table-column label="年龄" prop="empAge" width="100" />
        <el-table-column label="电话" prop="empPhoneNum" width="180" />
        <el-table-column label="科室" prop="office.officeName" width="120" />
        <el-table-column label="职务" prop="role.roleName" width="100" />
        <el-table-column label="加入时间" prop="jionTime" width="180" />
        <el-table-column label="操作" prop="do" width="100" />
        <el-table-column align="right">
          <template #default="scope">
            <el-button text @click="handleEdit(scope.$index, scope.row)" >
              编辑
            </el-button>

            <el-button size="mini" @click="handleClick(scope.$index, scope.row)" 
              >禁用</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-dialog v-model="editFormVisible" title="编辑医生">
        <el-form :model="form1">
          <el-form-item label="姓名" :label-width="formLabelWidth">
            <el-input v-model="form1.empName" autocomplete="off" />
          </el-form-item>
          <el-form-item label="性别" :label-width="formLabelWidth">
            <el-select v-model="form1.empSex" placeholder="请选择性别">
              <el-option label="男" value="男" />
              <el-option label="女" value="女" />
            </el-select>
          </el-form-item>
          <el-form-item label="年龄" :label-width="formLabelWidth">
            <el-input v-model="form1.empAge" autocomplete="off" />
          </el-form-item>
          <el-form-item label="手机号" :label-width="formLabelWidth">
            <el-input v-model="form1.empPhoneNum" autocomplete="off" />
          </el-form-item>
          <el-form-item label="科室" :label-width="formLabelWidth">
            <el-select v-model="form1.officeId" placeholder="请选择科室">
              <template
                v-for="item in store.state.doctor.keshiData"
                :key="item.id"
              >
                <el-option :label="item.officeName" :value="item.id" />
              </template>
            </el-select>
          </el-form-item>
          <el-form-item label="级别" :label-width="formLabelWidth">
            <el-select v-model="form1.empGrade" placeholder="请选择级别">
              <el-option label="主治医师" value="1" />
              <el-option label="副主任医师" value="2" />
              <el-option label="主任医师" value="3" />
              <el-option label="医士" value="4" />
              <el-option label="医师" value="5" />
              <el-option label="助理医师" value="6" />
              <el-option label="实习医师" value="7" />
              <el-option label="主管护师" value="8" />
              <el-option label="护师" value="9" />
              <el-option label="护士" value="10" />
              <el-option label="医师助理" value="11" />
              <el-option label="研究生" value="12" />
              <el-option label="随访员" value="13" />
              <el-option label="其他" value="14" />
            </el-select>
          </el-form-item>
          <el-form-item label="职务" :label-width="formLabelWidth">
            <el-radio-group v-model="form1.menuId">
              <el-radio :label="3" value="2">医生</el-radio>
              <el-radio :label="6" value="3">护士</el-radio>
              <el-radio :label="9" value="4">挂号员</el-radio>
              <el-radio :label="12" value="5">收费员</el-radio>
              <el-radio :label="15" value="6">发药员</el-radio>
              <el-radio :label="18" value="7">财务</el-radio>
              <el-radio :label="21" value="8">其他人员</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="医生擅长" :label-width="formLabelWidth">
            <el-input v-model="textarea1" :rows="2" type="textarea" />
          </el-form-item>
          <el-form-item label="医生介绍" :label-width="formLabelWidth">
            <el-input v-model="textarea2" :rows="2" type="textarea" />
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button type="primary" @click="confirm"> 保存 </el-button>
          </span>
        </template>
      </el-dialog>
      <el-pagination
        class="pagination"
        background
        v-model:page-size="pageSize"
        @current-change="pageChange"
        layout="prev, pager, next"
        :total="store.state.doctor.tableTotal"
      />
    </el-tab-pane>

    <el-tab-pane label="职务管理" name="second" > 
      
      <div v-if="quanxianFlag">
       <el-button size="small" @click="returnBack">返回</el-button><br />
        <span class="big">看病就诊</span>
        <el-checkbox-group>
          <el-checkbox   label="新开就诊 " :checked="hasItem(6)"/>
          <el-checkbox   label="就诊列表" :checked="hasItem(7)" />
          <el-checkbox   label="医生排班" :checked="hasItem(8)" />
          <el-checkbox   label="门诊挂号" :checked="hasItem(9)" />
          <el-checkbox   label="挂号列表" :checked="hasItem(10)" />
          <el-checkbox   label="患者库" :checked="hasItem(11)" />
        </el-checkbox-group>

        <span>收费发药</span>
        <el-checkbox-group>
          <el-checkbox   label="收费发药" :checked="hasItem(12)" />
        </el-checkbox-group>
        <span>药品进销存</span>
        <el-checkbox-group >
          <el-checkbox   label="药品信息维护 " :checked="hasItem(13)" />
          <el-checkbox   label="供应商维护" :checked="hasItem(14)" />
          <el-checkbox   label="采购入库" :checked="hasItem(15)" />
          <el-checkbox   label="入库审核" :checked="hasItem(16)" />
          <el-checkbox   label="库存查询" :checked="hasItem(17)" />
        </el-checkbox-group>
        <span>数据统计</span>
        <el-checkbox-group >
          <el-checkbox   label="诊所收支统计 " :checked="hasItem(18)" />
          <el-checkbox   label="药品销售统计" :checked="hasItem(19)" />
          <el-checkbox   label="检查项目统计" :checked="hasItem(20)" />
          <el-checkbox   label="年月报表统计" :checked="hasItem(21)" />
          <el-checkbox   label="工作量统计" :checked="hasItem(22)" />
        </el-checkbox-group>
        <span>系统设置</span>
        <el-checkbox-group >
          <el-checkbox   label="医生管理 " :checked="hasItem(23)" />
          <el-checkbox   label="科室管理" :checked="hasItem(24)" />
          <el-checkbox   label="挂号费管理" :checked="hasItem(25)" />
          <el-checkbox   label="处方附加费" :checked="hasItem(26)" />
          <el-checkbox   label="检查项目费" :checked="hasItem(27)" />
          <el-checkbox   label="字典表维护" :checked="hasItem(28)" />
          <el-checkbox   label="诊所信息" :checked="hasItem(29)" />
          <el-checkbox   label="第三方设置" :checked="hasItem(30)" />
          <el-checkbox   label="日志" :checked="hasItem(31)" />
        </el-checkbox-group>
      </div>
      <el-table v-else :data="Data" style="width: 100%">
        <el-table-column label="序号" prop="id" width="180" />
        <el-table-column label="职位名称" prop="name" width="180" />

        <el-table-column label="操作">
          <template #default="scope">
            <el-button size="small" @click="Edit(scope.row)"
              >查看权限</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-tab-pane>
  </el-tabs>
</template>

<script lang="ts" setup>
import router from "@/router";
import { computed, ref, reactive, onBeforeMount } from "vue";
import type { TabsPaneContext } from "element-plus";
import { Timer } from "@element-plus/icons-vue";
import { useStore, mapGetters, mapMutations } from "vuex";
import axios from "@/utils/http";
import log from "@/store/setting/log";

// const checkList = ref([]);
const store = useStore();
const getDoctor = computed(
  mapGetters(["getDoctor"]).getDoctor.bind({
    $store: store,
  })
);
const setDoctorData = mapMutations(["setDoctorData"]).setDoctorData.bind({
  $store: store,
});
const setKeshiData = mapMutations(["setKeshiData"]).setKeshiData.bind({
  $store: store,
});

const searchDoctorData = mapMutations([
  "searchDoctorData",
]).searchDoctorData.bind({
  $store: store,
});

const menuId = ref(3);
const editFormVisible = ref(false);

const textarea1 = ref("");
const textarea2 = ref("");

const dialogTableVisible = ref(false);
const dialogFormVisible = ref(false);
const formLabelWidth = "140px";
const input = ref("");
const now = new Date();
const pageSize = ref(5);
onBeforeMount(() => {
  setKeshiData();
  setDoctorData({ currentPage: 1, pageSize: 5 });
});
const pageChange = (currentPage: any) => {
  setDoctorData({ currentPage: currentPage, pageSize: 5 });
};

//查看权限
const quanxianFlag = ref(false);
const quanxianList = ref([]);

const returnBack = () => {
  quanxianFlag.value = false;
};
const hasItem = (id: any) => {
  let flag = false;
  quanxianList.value.forEach((item: any) => {
    if (id == item.menuId) {
      flag = true;
    }
  });
  console.log("遍历",id,flag)
  return flag;
};
const Edit = async (row: any) => {
  await axios({
    url: "/setting/doctorManage/findMenuByRoleId",
    method: "get",
    params: {
      id: row.id,
    },
  }).then((res: any) => {
    console.log("1", res);
    quanxianList.value = res.data.data;
  });

  quanxianFlag.value = true;
  console.log("权限列表", quanxianList.value);
};

const form = reactive({
  empName: "",
  empSex: "",
  empAge: "",
  empPhoneNum: "",
  empGrade: "",
  officeId: "",
  menuId: "",
  // date: "",
  // company: "",
  // specifications: "",
});

const form1 = reactive({
  empName: "",
  empSex: "",
  empAge: "",
  empPhoneNum: "",
  empGrade: "",
  officeId: "",
  menuId: "",
  textarea1: "",
  textarea2: "",
});

interface anys {
  id: string;
  name: string;
}

const Data: anys[] = [
  {
    id: "1",
    name: "管理员",
  },
  {
    id: "2",
    name: "医生",
  },
  {
    id: "3",
    name: "护士",
  },
  {
    id: "4",
    name: "挂号员",
  },
  {
    id: "5",
    name: "收费员",
  },
  {
    id: "6",
    name: "发药员",
  },
  {
    id: "7",
    name: "财务",
  },
  {
    id: "8",
    name: "其他",
  },
];
const activeName = ref("first");
const banData = ref([]);
const findEmp = (row: any) => {
  dialogFormVisible.value = true;
  console.log(row);
  axios({
    url: "/setting/doctorManage/findEmpStopNum",
    method: "post",
  }).then((res: any) => {
    console.log("45", res.data);
    banData.value = res.data.data;
  });
};
//启用
const openThis = (index: number, row: any) => {
  console.log(index, row);
  axios({
    url: "/setting/doctorManage/startEmpById",
    method: "post",
    params: {
      id: row.id,
    },
  }).then((res: any) => {
    console.log("1", res);
    setDoctorData({ currentPage: 1, pageSize: pageSize.value });
  });
};

//禁用
const handleClick = (index: number, row: any) => {
  console.log(index, row);
  // handleClickdata=row;
  // (form.empName = row.empName),
  //       (form.empSex = row.empSex),
  //       (form.empPhoneNum = row.empPhoneNum.toString()),
  //       (form.officeId = row.officeId),
  //       (form.empGrade = row.empGrade),
  //       (form.menuId = row.menuId),
  axios({
    url: "/setting/doctorManage/stopEmpById",
    method: "post",
    params: {
      id: row.id,
    },
  }).then((res: any) => {
    console.log("1231", res.data);

    setDoctorData({ currentPage: 1, pageSize: pageSize.value });
  });
};

//添加
const ok = () => {
  console.log(form);

  axios({
    url: "/setting/doctorManage/addEmp",
    method: "post",
    data: {
      empName: form.empName,
      officeId: form.officeId,
      empGrade: form.empGrade,
      empPhoneNum: form.empPhoneNum,
      empAge: form.empAge,
      menuId: form.menuId,
    },
  }).then((res: any) => {
    console.log(res);
    setDoctorData({ currentPage: 1, pageSize: pageSize.value });
  });
  dialogTableVisible.value = false;
};

let doctorRow: any = {
  empName: "",
  empSex: "",
  empPhoneNum: "",
  officeId: "",
  empGrade: "",
  menuId: "",
  empAge: "",
  id: "",
};

//编辑
const handleEdit = (index: number, row: any) => {
  console.log(index, row);
  doctorRow = row;
  console.log(index, doctorRow);

  (form1.empName = row.empName),
    (form1.empAge = row.empAge),
    (form1.empSex = row.empSex),
    (form1.empPhoneNum = row.empPhoneNum.toString()),
    (form1.officeId = row.officeId),
    (form1.empGrade = row.empGrade),
    (form1.menuId = row.menuId),
    (editFormVisible.value = true);
};

const confirm = () => {
  console.log(doctorRow);

  axios({
    url: "/setting/doctorManage/updateEmp",
    method: "post",
    data: {
      id: doctorRow.id,
      empName: form1.empName,
      empAge: form1.empAge,
      empSex: form1.empSex,
      empGrade: form1.empGrade,
      empPhoneNum: form1.empPhoneNum,
      office: form1.officeId,
      menuId: form1.menuId,
    },
  }).then((res: any) => {
    console.log("1", res);
    setDoctorData({ currentPage: 1, pageSize: pageSize.value });
  });
  editFormVisible.value = false;
};

//查询
const search = ref("");

const searchDoctor = () => {
  searchDoctorData({
    empName: search.value,
  });
};
</script>

<style scoped>

.pagination{
  display: flex;
  justify-content: center;
  align-items: center;
}
.increase{
  background-color: rgb(35, 163, 249);
}
.disabled{
  margin: 10px;
  background-color: rgb(35, 163, 249);
}
.el-button--text {
  margin-right: 15px;
}
.el-select {
  width: 300px;
}
.el-input {
  width: 300px;
}
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>